<script>
  import '@wangeditor/editor/dist/css/style.css'; // 引入 css
  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { DomEditor } from '@wangeditor/editor';

  export default {
    components: { Editor, Toolbar },
    setup() {
      // 编辑器实例，必须用 shallowRef
      const editorRef = shallowRef();

      // 内容 HTML
      const valueHtml = ref();

      // 模拟 ajax 异步获取内容
      onMounted(() => {
        setTimeout(() => {
          valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
        }, 1500);
      });

      window.a = () => {
        console.log(valueHtml.value);
      };

      const toolbarConfig = {
        toolbarKeys: [
          // 'bold',
          // 'underline',
          // 'italic',
          // 'through',
          // 'code',
          // 'clearStyle',
          // 'color',
          // 'bgColor',
          // 'divider',
          // 'codeBlock',
          // 'emotion',
        ],
      };

      // window.aaa = () => {
      //   const toolbar = DomEditor.getToolbar(editorRef.value);

      //   const curToolbarConfig = toolbar.getConfig();
      //   console.log(curToolbarConfig.toolbarKeys); // 当前菜单排序和分组
      //   console.log(editorRef.value.getAllMenuKeys()); // 当前菜单排序和分组
      //   toolbarConfig.toolbarKeys = editorRef.value.getAllMenuKeys();
      // };
      const defaultContent = [
        {
          type: 'paragraph',
          lineHeight: '1.2',
          fontFamily: '微软雅黑',
          fontSize: '1rem',
          children: [{ text: '111' }],
        },
      ];
      const editorConfig = { placeholder: '请输入内容', scroll: true, MENU_CONF: {} };
      editorConfig.MENU_CONF['uploadImage'] = {
        server: 'http://localhost:8080/common/uploadImage',
        // form-data fieldName ，默认值 'wangeditor-uploaded-image'
        fieldName: 'imgName',
        // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 10 * 1024 * 1024, // 1M
        // 最多可上传几个文件，默认为 100
        maxNumberOfFiles: 10,
        // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
        allowedFileTypes: ['image/*'],
        // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
        // meta: {
        //   token: 'xxx',
        //   otherKey: 'yyy',
        // },
        // 将 meta 拼接到 url 参数中，默认 false
        metaWithUrl: false,
        // 自定义增加 http  header
        // headers: {
        //   Accept: 'text/x-json',
        //   otherKey: 'xxx',
        // },
        // 跨域是否传递 cookie ，默认为 false
        withCredentials: false,
        // 超时时间，默认为 10 秒
        timeout: 5 * 1000, // 5 秒
      };
      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value;
        if (editor == null) return;
        editor.destroy();
      });

      const handleCreated = editor => {
        editorRef.value = editor; // 记录 editor 实例，重要！
      };

      return {
        editorRef,
        valueHtml,
        mode: 'simple', // default 或 'simple'
        toolbarConfig,
        editorConfig,
        handleCreated,
      };
    },
  };
</script>
<template>
  <div>
    <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      :defaultContent="defaultContent"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>
<style>
  Toolbar {
    border-bottom: 1px solid #ccc;
  }
  Editor {
    overflow-y: hidden;
  }
  .w-e-text-container {
    background-color: aliceblue;
  }
</style>
<!-- <script>
  //工具栏全量设置
  const toolbarConfig = {
    toolbarKeys: [
      'bold',
      'underline',
      'italic',
      'through',
      'code',
      'sub',
      'sup',
      'clearStyle',
      'color',
      'bgColor',
      'fontSize',
      'fontFamily',
      'indent',
      'delIndent',
      'justifyLeft',
      'justifyRight',
      'justifyCenter',
      'justifyJustify',
      'lineHeight',
      'insertImage',
      'deleteImage',
      'editImage',
      'viewImageLink',
      'imageWidth30',
      'imageWidth50',
      'imageWidth100',
      'divider',
      'emotion',
      'insertLink',
      'editLink',
      'unLink',
      'viewLink',
      'codeBlock',
      'blockquote',
      'headerSelect',
      'header1',
      'header2',
      'header3',
      'header4',
      'header5',
      'todo',
      'redo',
      'undo',
      'fullScreen',
      'enter',
      'bulletedList',
      'numberedList',
      'insertTable',
      'deleteTable',
      'insertTableRow',
      'deleteTableRow',
      'insertTableCol',
      'deleteTableCol',
      'tableHeader',
      'tableFullWidth',
      'insertVideo',
      'uploadVideo',
      'editVideoSize',
      'uploadImage',
      'codeSelectLang',
    ],
  };
</script> -->
